<template>
	<view>
		<view class="flex topTool">
			<view class="query" @click="opencity">
				{{city}}
			</view>
			<view style="margin-left: 16px;">
				<picker mode="date" @change="onDateChange" data-name="startDate" :value="startDate">
					<view class="query">
						<view class="date">{{startDate}}</view>
					</view>
				</picker> 
			</view>
			<view style="margin-left: 8px;">至</view>
			<view style="margin-left: 8px;">
				<picker mode="date" @change="onDateChange" data-name="endDate" :value="endDate">
					<view class="query">
						<view class="date">{{endDate}}</view>
					</view>
				</picker> 
			</view>
			<view>
				<view class="btn" @click="loadData">查看</view>
			</view>
		</view>
		
		<map :style="mapStyle" scale="12" :latitude="latitude" :longitude="longitude" :markers="ordList" :circles="circles" @regionchange="regionchange"></map>
		
		<view class="bottomTips">
			<view>单量:{{dataCount.all}}单 / 退款:{{dataCount.refund}}单({{(dataCount.refund / dataCount.all * 100).toFixed(2)}}%)</view>
		</view>
	</view>
</template>

<script>
	var that,App=getApp(),Comm=getApp().comm;
	export default {
		data() {
			return {
				latitude: 29.558231,
				longitude: 106.58066,
				distance:5,
				ordList: [],
				mapStyle:'',
				startDate:'',
				endDate:'',
				city:'定位中',
				circles: [],
				dataCount:{
					all:0,
					refund:0
				}
			}
		},
		onReady() {
			const sysinfo=uni.getSystemInfoSync();
			/*
			"safeArea": {
				"left": 0,
				"right": 400,
				"top": 0,
				"bottom": 858,
				"width": 400,
				"height": 858
			},
			"screenHeight": 858,
			"screenWidth": 400,
			"statusBarHeight": 0,
			"windowBottom": 0,
			"windowHeight": 814,
			"windowTop": 44,
			*/
			this.mapStyle=`width:100%;height:${sysinfo.windowHeight-60}px;`;
		},
		onLoad() {
			that=this;
			uni.setNavigationBarTitle({
				title:`附近订单(${that.distance}KM)`
			});
			const timestamp = Date.parse(new Date()) /1000;
			const date=this.comm.formatTime(timestamp);
			that.startDate=`${date.year}-${date.month}-01`;
			that.endDate=`${date.year}-${date.month}-${date.day}`;
			
			this.comm.getLocalPos().then(res=>{
				that.latitude=res.lat,
				that.longitude=res.lng;
				that.getAddress();
			});
			
		},
		methods: {
			regionchange(e){
				if(e.type=='end'){
					this.latitude=e.target.centerLocation.latitude;
					this.longitude=e.target.centerLocation.longitude;
					that.getAddress();
				}
			},
			onDateChange(e){
				this[e.target.dataset.name]=e.detail.value;
			},
			setCircles(){
				this.circles=[{
					latitude: this.latitude,
					longitude: this.longitude,
					color: '#54C3FF',
					fillColor: '#54C3FF3A',
					radius: that.distance * 1000,
					strokeWidth: 1
				}];
			},
			opencity() {
				var pos = uni.getStorageSync('location_master');
				var data={
					success: (res) => {
						that.latitude=res.latitude,that.longitude=res.longitude;
						that.getAddress();
					}
				};
				if(pos){
					data.latitude=pos.lat;
					data.longitude=pos.lng;
				}
				uni.chooseLocation(data);
			},
			getAddress(){
				this.comm.getAddressForPos(this.latitude,this.longitude).then(address=>{
					if(address){
						that.city=address.district;
						that.setCircles();
					}
				});
			},
			loadData(){
				this.comm.http('/api/tool/ordermap',{lat:this.latitude,lng:this.longitude,start:this.startDate,end:this.endDate,distance:this.distance}).then(res=>{
					var data=[];
					that.dataCount={
						all:0,
						refund:0
					};
					for (let item of res.data) {
						that.dataCount.all++;
						item.order_status==7?that.dataCount.refund++:null;
						data.push({
							latitude:item.lat,
							longitude:item.lng,
							iconPath:'../../static/order1.png',
							width: 32,
							height: 32,
							callout:{
								// content: item.nickname.substring(0,4),
								content:`${item.order_status==7?'退款订单':'￥'+item.pay_money}`,
								fontSize: 12,
								padding: 4,
								display: "ALWAYS",
								color:"#ffffff",
								bgColor:`${item.order_status==7?'#666':'#ff007f8a'}`,
								borderWidth:1,
								borderColor:"#ffffff",
								borderRadius:10
							}
						});
					}
					that.ordList=data;
				});
			}
		}
	}
</script>

<style lang="scss">
	.topTool{
		height: 60px; align-items: center; background-color: #f0f0f0; padding: 0 8px;
	}
	.query{
		border-bottom: 1px solid #999; padding: 8px; background: #fff;
	}
	.btn{
		border-radius: 15px; border: 1px solid #999; padding: 8px 5vw; margin-left:16px;  background: #fff;
	}
	.bottomTips{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		line-height: 35px;
		background-color: #fff;
		z-index: 99;
		padding: 0 16px;
		text-align: center;
	}
</style>
